<template>
  <view class="settings-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <text class="back-icon">‹</text>
        </view>
        <view class="navbar-title">设置</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 横竖屏设置 -->
      <view class="setting-item" @click="handleSettingClick('screen')">
        <text class="setting-label">横竖屏设置</text>
        <text class="arrow-right">›</text>
      </view>

      <!-- 阅读模式 -->
      <view class="setting-item" @click="handleSettingClick('reading')">
        <text class="setting-label">阅读模式</text>
        <text class="arrow-right">›</text>
      </view>

      <!-- 阅读时长 -->
      <view class="setting-item" @click="handleSettingClick('duration')">
        <text class="setting-label">阅读时长</text>
        <text class="arrow-right">›</text>
      </view>

      <!-- 显示中文绘本 -->
      <view class="setting-item">
        <text class="setting-label">显示中文绘本</text>
        <switch 
          :checked="showChineseBooks" 
          @change="onChineseBooksChange" 
          color="#4CD964"
          class="setting-switch"
        />
      </view>

      <!-- 显示阅读计划 -->
      <view class="setting-item">
        <text class="setting-label">显示阅读计划</text>
        <switch 
          :checked="showReadingPlan" 
          @change="onReadingPlanChange" 
          color="#4CD964"
          class="setting-switch"
        />
      </view>

      <!-- 隐藏操作图标 -->
      <view class="setting-item">
        <text class="setting-label">隐藏操作图标</text>
        <switch 
          :checked="hideActionIcons" 
          @change="onHideActionIconsChange" 
          color="#4CD964"
          class="setting-switch"
        />
      </view>

      <!-- 隐私政策 -->
      <view class="setting-item" @click="handleSettingClick('privacy')">
        <text class="setting-label">隐私政策</text>
        <text class="arrow-right">›</text>
      </view>

      <!-- 用户协议 -->
      <view class="setting-item" @click="handleSettingClick('agreement')">
        <text class="setting-label">用户协议</text>
        <text class="arrow-right">›</text>
      </view>

      <!-- 清空书架 -->
      <view class="setting-item" @click="handleSettingClick('clear')">
        <text class="setting-label">清空书架</text>
      </view>

      <!-- 注销账号 -->
      <view class="setting-item logout-item" @click="handleLogout">
        <text class="setting-label logout-label">注销账号</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showChineseBooks: true,
      showReadingPlan: true,
      hideActionIcons: false
    }
  },
  
  onLoad() {
    // 从本地存储加载设置
    this.loadSettings()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 处理设置项点击
    handleSettingClick(type) {
      switch(type) {
        case 'screen':
          uni.showToast({
            title: '横竖屏设置',
            icon: 'none'
          })
          break
        case 'reading':
          uni.showToast({
            title: '阅读模式',
            icon: 'none'
          })
          break
        case 'duration':
          uni.showToast({
            title: '阅读时长',
            icon: 'none'
          })
          break
        case 'privacy':
          uni.showToast({
            title: '隐私政策',
            icon: 'none'
          })
          break
        case 'agreement':
          uni.showToast({
            title: '用户协议',
            icon: 'none'
          })
          break
        case 'clear':
          this.showClearConfirm()
          break
      }
    },
    
    // 显示中文绘本开关变化
    onChineseBooksChange(e) {
      this.showChineseBooks = e.detail.value
      this.saveSettings()
    },
    
    // 显示阅读计划开关变化
    onReadingPlanChange(e) {
      this.showReadingPlan = e.detail.value
      this.saveSettings()
    },
    
    // 隐藏操作图标开关变化
    onHideActionIconsChange(e) {
      this.hideActionIcons = e.detail.value
      this.saveSettings()
    },
    
    // 显示清空书架确认对话框
    showClearConfirm() {
      uni.showModal({
        title: '提示',
        content: '确定要清空书架吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            this.clearBookshelf()
          }
        }
      })
    },
    
    // 清空书架
    clearBookshelf() {
      uni.showToast({
        title: '书架已清空',
        icon: 'success'
      })
    },
    
    // 注销账号
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要注销账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里可以调用注销API
            uni.showToast({
              title: '账号已注销',
              icon: 'success'
            })
            // 跳转到登录页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/login/index'
              })
            }, 1500)
          }
        }
      })
    },
    
    // 加载设置
    loadSettings() {
      try {
        const settings = uni.getStorageSync('app_settings')
        if (settings) {
          this.showChineseBooks = settings.showChineseBooks !== undefined ? settings.showChineseBooks : true
          this.showReadingPlan = settings.showReadingPlan !== undefined ? settings.showReadingPlan : true
          this.hideActionIcons = settings.hideActionIcons !== undefined ? settings.hideActionIcons : false
        }
      } catch (e) {
        console.error('加载设置失败:', e)
      }
    },
    
    // 保存设置
    saveSettings() {
      try {
        const settings = {
          showChineseBooks: this.showChineseBooks,
          showReadingPlan: this.showReadingPlan,
          hideActionIcons: this.hideActionIcons
        }
        uni.setStorageSync('app_settings', settings)
      } catch (e) {
        console.error('保存设置失败:', e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 自定义导航栏 */
.custom-navbar {
  background-color: #ffffff;
  padding-top: var(--status-bar-height, 44px);
  border-bottom: 1px solid #e5e5e5;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.navbar-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}

.navbar-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.navbar-right {
  width: 44px;
}

/* 设置列表 */
.settings-list {
  margin-top: 16px;
  background-color: #ffffff;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #ffffff;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f8f8;
  }
}

.setting-label {
  font-size: 16px;
  color: #333333;
}

.logout-item {
  margin-top: 32px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.logout-label {
  color: #ff4444;
}

.arrow-right {
  font-size: 18px;
  color: #cccccc;
  font-weight: bold;
}

.setting-switch {
  transform: scale(0.8);
}
</style>